<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <style>
        #btnSearch {
            margin-left: 3px;
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            border: none
        }

    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div class="page-content">
    <div class="row" style="padding-left:14px; padding-right:15px">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title" style="margin-top:22px">
                库存
                <small>管理</small>
            </h3>
            <hr/>
            <!-- END PAGE TITLE & BREADCRUMB-->
        </div>
        <div align="right"><h3><a href="addStorage.html" th:href="@{/storage/addStorageHtml}"
                                  style="margin-right:13px; text-decoration:underline">添加入库</a>
        </h3>
        </div>
        <div>
            <div class="row">
                <div class=" col-lg-12 col-xs-12"
                     style="text-align: right; padding: 0 0 20px 0">
                    <form action="storage.html" th:action="@{/storage/findStorageByBarcode}" onsubmit="return checkBarcode();">
                        <input placeholder="请输入商品条形码……" type="text" name="barcode" id="input_barcode" onkeyup="this.value=this.value.replace(/\D/gi,'')"/>
                        <input type="submit" id="btnSearch" value="搜索" size="2px"/>&emsp;&emsp;&nbsp;
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>


        <div>
            <div class="panel panel-info">
                <div class="panel-heading">库存信息</div>
                <table id="table" class="table table-striped table-bordered table-hover datatable">
                    <thead id="item">
                    <th>商品条形码</th>
                    <th>商品名称</th>
                    <th>库存数量</th>
                    <th th:if="${session.currentUser.id}==1">操作</th>
                    </thead>

                    <tr bgcolor="#e7e9e9" th:each="product : ${products}">
                        <td th:id="${'tdb'+product.id}" th:text="${product.barcode}">商品条形码</td>
                        <td th:id="${'tdn'+product.id}" th:text="${product.productName}">商品名称</td>
                        <td th:id="${'tds'+product.id}" th:text="${product.storage}">库存数量</td>
                        <td th:if="${session.currentUser.id}==1">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span class='glyphicon glyphicon-edit operate' title='修改' th:onclick="${'updateStorage('+product.id+')'}"></span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>


    <!--分页导航-->
    <div id="bottomTool" class="row-fluid">



        <!--选择每页多少行-->
        <div class="span6" style="float:left;margin-left:200px">
            <div class="dataTables_length" id="DataTables_Table_0_length">
                <label>每页
                    <select id="pageSize" onChange="research()" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                        <option th:selected="6== ${page.pageSize}" value="6">6</option>
                        <option th:selected="11 == ${page.pageSize}" value="11">11</option>
                    </select>
                    条记录
                </label>
            </div>
        </div>

        <!--分页-->
        <div class="span6" style="float:left;margin-left:120px;margin-top:-8px">
            <div class="dataTables_paginate paging_bootstrap pagination">
                <ul id="previousNext">
                    <li class="prev disabled" style="float:left"  th:style="${page.currentPage==page.totlePage?'pointer-events:none;float:left;':'pointer-events:auto;float:left;'}"><a id="previousPage" href="#" onclick="prePage()" th:style="${page.currentPage==1?'color:#aaa':'color:#00f'}">上一页</a>
                    </li>
                    <div id="page" style="float:left;width:60px">
                        <select id="pageNum" onChange="search()" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length" style="margin-top:-2px">
                            <option th:each="i : ${#numbers.sequence( 1, page.totlePage, 1)}" th:value="${i}" th:text="${i}" th:selected="${i} == ${page.currentPage}" selected="selected" value="1">1</option>
                        </select>
                    </div>
                    <li class="next" style="float:left" th:style="${page.currentPage==page.totlePage?'pointer-events:none;float:left;':'pointer-events:auto;float:left;'}"><a id="nextPage" href="#" onclick="nextPage()" th:style="${page.currentPage==page.totlePage?'color:#aaa':'color:#00f'}">下一页</a></li>
                </ul>
            </div>
        </div>

        <div class="span6" style="float:left;margin-left:40px">
            <div id="DataTables_Table_0_info" class="dataTables_info" style="font-size:15px">共<span
                    th:text="${page.totlePage}">1</span>页/共<span th:text="${page.totleNumber}">1</span>项
            </div>
        </div>
    </div>

    <form id="hideForm" action="storage.html" method="post" th:action="@{/storage/findAllStorage}" hidden="hidden">
        <input id="hideCurrentPage" name="currentPage" th:value="${page.currentPage}" />
        <input id="hidePageSize" name="pageSize" th:value="${page.pageSize}" />
        <input id="hideMaxPage" name="maxPage" th:value="${page.totlePage}" />
    </form>
</div>

<!-- 修改库存，弹出框-->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labeledby="modalTitle"
     style="margin-top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <center><h4 class="modal-title" style="font-family:'黑体'">修改库存数量</h4></center>
            </div>
            <center>
                <div class="modal-body">

                    <form method="post" th:action="@{/storage/updateStorage}" action="javascript:void;" style="padding-top:10px">
                        <input type="hidden" id="productId" name="productId"/>

                        <div>
						<span>商品条形码:
						</span> <input type="text" name="productBarcode" id="productBarcode" disabled="true"/>
                        </div>
                        <br/>

                        <div>
						<span>商品名称:&nbsp;&nbsp;&nbsp;&nbsp;
						</span> <input type="text" name="productName" id="productName" disabled="true"/>
                        </div>
                        <br/>

                        <div>
						<span>库存数量:&nbsp;&nbsp;&nbsp;&nbsp;
						</span> <input type="text" name="productStorage" id="productStorage"/>
                        </div>
                        <br/>

                        <hr/>
                        <input class='t_bt' id="okbt" type="submit" value="提交"/>
                        <input class='t_bt' id="cancelbt" type="button" value="取消" onclick="cancelModify()"/>

                    </form>

                </div>
            </center>
        </div>
    </div>
</div>

</body>
<script src="../../resources/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../resources/plugins/dataTables.bootstrap.js" th:src="@{/resources/plugins/dataTables.bootstrap.js}"
        type="text/javascript"></script>
<script src="../../resources/plugins/jquery.dataTables.js" th:src="@{/resources/plugins/jquery.dataTables.js}"
        type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.js"
        th:src="@{/resources/plugins/bootstrap/js/bootstrap.js}" type="text/javascript"></script>
<script src="../../resources/plugins/bootstrap/js/bootstrap.min.js"
        th:src="@{/resources/plugins/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>

<script type="text/javascript">
    // <![CDATA[

    function search() {
        var currentPage = $("#pageNum option:selected").text();
        console.log(currentPage);
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    function research() {
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        var currentPage = 1;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 上一页
     */
    function prePage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        if (currentPage == 1) {
            //已经是第一页
            return;
        }
        currentPage--;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 下一页
     */
    function nextPage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        var maxPage = $("#hideMaxPage").val();
        if (currentPage == maxPage) {
            //已经是最后一页
            return;
        }
        currentPage++;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }
    function updateStorage(id) {
        $('#secondModal').modal('show');
        $('#productId').val(''+id);
        $('#productBarcode').val($("#tdb"+id).text());
        $('#productName').val($("#tdn"+id).text());
        $('#productStorage').val($("#tds"+id).text());

    }
    function cancelModify() {
        $('#secondModal').modal('hide');
    }

    function checkBarcode(){
        var barcode = $("#input_barcode").val();
        var number = /^[0-9]{9,13}$/;
        if(!number.test(barcode))return false;
        return true;
    }

    // ]]>
</script>

</html>
